<template>
  <div>
    <!-- 添加或修改用户配置对话框 -->
    <el-dialog
      class="dia-style"
      :title="title"
      :visible.sync="open"
      width="680px"
      append-to-body
      @close="reset"
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="80px" :disabled="readonly">
        <el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="用户名称" prop="name">
                <el-select v-model="form.userId" placeholder="请选择" @change="$forceUpdate()">
                  <el-option v-for="item in nameList" :label="item.name" :value="item.id" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-col :span="24">
            <el-form-item label="用户账号" prop="account">
              <el-input v-model="form.account" clearable placeholder="请输入用户账号" maxlength="30" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="用户密码" prop="password" v-if="!id">
              <el-input
                v-model="form.password"
                placeholder="请输入用户密码"
                type="password"
                clearable
                maxlength="20"
                show-password
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="用户角色" prop="roleId">
              <el-select
                v-if="!readonly"
                style="width: 100%"
                v-model="form.roleId"
                clearable
                value-key="id"
                placeholder="请选择角色"
                @change="$forceUpdate()"
              >
                <el-option
                  v-for="item in roleOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                  :disabled="item.status == 1"
                ></el-option>
              </el-select>
              <el-input v-else v-model="form.roleName" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="状态">
              <el-radio-group v-model="form.status">
                <el-radio
                  v-for="dict in statusDict"
                  :key="dict.value + ''"
                  :label="dict.value"
                  :value="dict.value"
                >
                  {{
                  dict.label
                  }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="12">
            <el-form-item label="归属部门" prop="orgId">
              <treeselect
                v-model="form.orgId"
                :options="deptOptions"
                :show-count="true"
                placeholder="请选择归属部门"
                :disabled="readonly" />
            </el-form-item>
          </el-col>-->
        </el-row>
        <!-- <el-row>
          <el-col :span="12">
            <el-form-item label="手机号码" prop="phone">
              <el-input clearable v-model="form.phone" placeholder="请输入手机号码" maxlength="11" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="邮箱" prop="email">
              <el-input clearable v-model="form.email" placeholder="请输入邮箱" maxlength="50" />
            </el-form-item>
          </el-col>
        </el-row>-->
        <!-- <el-row>
          <el-col :span="12">
            <el-form-item label="用户性别">
              <el-select v-model="form.sex" placeholder="请选择性别" value-key="value">
                <el-option v-for="dict in dict.type.sys_user_sex" :key="dict.value" :label="dict.label"
                  :value="dict.value">{{ dict.label }}</el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>-->
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注">
              <el-input
                v-model="form.remark"
                type="textarea"
                :row="4"
                maxlength="200"
                clearable
                show-word-limit
                placeholder="请输入内容"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" v-if="!readonly" @click="submitForm">保 存</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { selectOptions } from '@/api/system/role'
import { addUser, updateUser, getUser, allUser } from '@/api/system/account'
import HkForm from '@/components/HKForm/index.vue'
import { nameRegx, passwordRegx } from '@/utils/validate'

const isUM = window.loginType == 'UM'

export default {
  components: { Treeselect, HkForm },
  data() {
    return {
      isUM,
      id: undefined,
      form: {},
      readonly: false,
      // 表单参数
      open: false,
      nameList: [],
      rules: {
        account: [
          { required: true, message: '用户账号不能为空', trigger: 'blur' },
          {
            pattern: /^[a-zA-z]\w{3,15}$/,
            message: '用户账号由字母、数字、下划线组成，字母开头，4-16位',
            trigger: 'blur'
          }
        ],
        /*     name: [
          { required: true, message: '用户名不能为空', trigger: 'blur' },
          {
            min: 2,
            max: 20,
            message: '用户名长度必须在2到20个字符之间',
            trigger: 'blur',
          },
          { pattern: nameRegx, message: '用户名只能使用中文，英文字母和数字及下划线', trigger: 'blur' },
        ], */
        password: [
          { required: true, message: '用户密码不能为空', trigger: 'blur' },
          /* {
            pattern: passwordRegx,
            message: '密码需同时包含数字、大写字母、小写字母和特殊字符，且长度在8-15位字符之间',
            trigger: ['blur', 'change']
          } */
        ],
        roleId: [{ required: true, message: '角色不能为空', trigger: 'blur' }],
        email: [
          {
            pattern: /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/,
            message: '请输入正确的邮箱地址',
            trigger: ['blur', 'change']
          }
        ],
        phone: [
          {
            pattern: /(13\d|14[579]|15[^4\D]|17[^49\D]|18\d)\d{8}/,
            message: '请输入正确的手机号码',
            trigger: 'blur'
          }
        ]
      },
      roleOptions: [],
      postOptions: []
    }
  },
  computed: {},
  props: {
    title: {
      type: String,
      default: ''
    },
    statusDict: {
      type: Array,
      default: []
    },
    deptOptions: {
      type: Array,
      default: []
    },
    currentDeptNode: {
      type: String,
      default: ''
    }
  },
  mounted() {},
  methods: {
    show(id) {
      this.open = true
      this.id = id
      this.loadData(id)
    },
    loadData(id) {
      // 获取角色列表
      selectOptions().then(res => {
        this.roleOptions = res
      })
      allUser().then(res => {
        this.nameList = res
      })
      if (id) {
        getUser(id).then(res => {
          const role = res.role || {}
          this.readonly = res.userType == 1 || isUM
          this.form = {
            ...res,
            roleId: role.id || '',
            roleName: role.name,
            status: res.status + ''
          }
        })
      } else {
        this.form = {
          status: '0',
          orgId: this.currentDeptNode
        }
      }
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          if (this.form.id) {
            updateUser(this.form).then(response => {
              this.$modal.msgSuccess('修改成功')
              this.open = false
              this.$emit('submitForm')
            })
          } else {
            addUser(this.form).then(response => {
              this.$modal.msgSuccess('新增成功')
              this.open = false
              this.$emit('submitForm')
            })
          }
        }
      })
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.$refs.form.resetFields()
    }
  }
}
</script>

<style lang="scss" scoped>
.el-row {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}
</style>
